// 搜索栏
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class SearchBar extends StatefulWidget {
  final String placeHolder;
  final void Function(String barcode) searchCb;
  const SearchBar({Key key, this.placeHolder, this.searchCb}) : super(key: key);

  @override
  _SearchBarState createState() => _SearchBarState();
}

class _SearchBarState extends State<SearchBar> {
  TextEditingController _searchTextController = TextEditingController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color.fromRGBO(255, 255, 255, 1),
      padding: EdgeInsets.fromLTRB(16, 12, 16, 0),
      height: 44,
      child: TextField(
        controller: _searchTextController,
        style: TextStyle(
          fontSize: 12,
          height: 16 / 12,
          color: Color.fromRGBO(43, 44, 46, 1),
        ),
        textInputAction: TextInputAction.search,
        onEditingComplete: () {
          FocusScope.of(context).requestFocus(FocusNode());
          widget.searchCb(_searchTextController.text);
        },
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(0),
          hintText: widget.placeHolder,
          hintStyle: TextStyle(
            fontSize: 12,
            height: 16 / 12,
            color: Color.fromRGBO(181, 184, 189, 1),
          ),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(3),
            borderSide: BorderSide.none,
          ),
          filled: true,
          fillColor: Color.fromRGBO(240, 240, 243, 1),
          prefixIcon: Container(
            padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
            child: Image(
              image: AssetImage('assets/images/search_icon.png'),
              width: 12,
              height: 12,
            ),
          ),
          // suffix: GestureDetector(
          //   onTap: () {
          //     setState(() {
          //       _searchTextController.text = '';
          //     });
          //   },
          //   child: Container(
          //     // color: Colors.black,
          //     child: Image(
          //       image: AssetImage('assets/images/clear.png'),
          //       width: 16,
          //       height: 16,
          //     ),
          //   ),
          // ),
        ),
      ),
    );
  }
}
